<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .bigbox{
            width: 600px;
            height: 600px;
            position: relative;
            margin: 20px auto;
            border: 1px solid dodgerblue;
        }
        .btn1,.btn2,.btn3{
            width: 100px;
            height: 50px;
            position: absolute;
            background-color: yellow;
            text-align: center;
            line-height: 50px;
            color: green;
            cursor: pointer;
        }
        .btn1{
            top:50px;
            left: 75px;
        }
        .btn2{
            top:50px;
            left: 250px;
        }
        .btn3{
            top:50px;
            left: 425px;
        }
        #smallbox{
            width: 300px;
            height: 300px;
            position: absolute;
            top:200px;
            left:150px;
            background-color: pink;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            color: white;
            transition: 1s;
        }
        #smallbox.one{
            width: 200px;
            height: 200px;
            position: absolute;
            top:350px;
            left:200px;
            background-color: firebrick;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: lightseagreen;
        }
        #smallbox.two{
            width: 500px;
            height: 250px;
            position: absolute;
            top:300px;
            left:50px;
            background-color: gray;
            text-align: center;
            line-height: 250px;
            font-size: 60px;
            color: darkorange;
        }
        #smallbox.three{
            width: 100px;
            height: 400px;
            position: absolute;
            top:100px;
            left:250px;
            background-color: dodgerblue;
            text-align: center;
            line-height: 400px;
            font-size: 45px;
            color:orangered;
        }
    </style>
</head>
<body>
<div class ="bigbox">
    <div class = "btn1">按钮1</div>
    <div class = "btn2">按钮2</div>
    <div class = "btn3">按钮3</div>
    <div id = "smallbox">元素</div>
</div>
<script>
    let btn1 = document.querySelector(".btn1")
    let btn2 = document.querySelector(".btn2")
    let btn3 = document.querySelector(".btn3")
    let smallbox = document.querySelector("#smallbox")
    btn1.onclick = function foo1(){
        smallbox.className = "one"
    }
    btn2.onclick = function foo2(){
        smallbox.className = "two"
    }
    btn3.onclick = function foo3(){
        smallbox.className = "three"
    }
</script>
</body>
</html>